<template>
  <div>
    <canvas
      ref="watermarkCanvas"
      :width="canvasWidth"
      :height="canvasHeight"
    ></canvas>
  </div>
</template>

<script setup>
import { ref, watchEffect, onMounted, toRefs } from 'vue';

// 接收父组件传入的 props
const props = defineProps({
  watermarkText: {
    type: String,
    default: '',
  },
  canvasWidth: {
    type: Number,
    default: 800, // 默认宽度
  },
  canvasHeight: {
    type: Number,
    default: 1000, // 默认高度
  },
  fontSize: {
    type: Number,
    default: 30, // 默认字体大小
  },
  fontColor: {
    type: String,
    default: 'rgba(0, 0, 0, 0.1)', // 默认水印字体颜色
  },
  rotateDegree: {
    type: Number,
    default: -30, // 水印旋转角度，默认-30度
  },
  gapX: {
    type: Number,
    default: 200, // 水平方向水印之间的间隔
  },
  gapY: {
    type: Number,
    default: 150, // 垂直方向水印之间的间隔
  },
  backgroundColor: {
    type: String,
    default: '#fff', // 默认背景颜色为白色
  },
});

// 将 props 转换为可响应的
const {
  watermarkText,
  canvasWidth,
  canvasHeight,
  fontSize,
  fontColor,
  rotateDegree,
  gapX,
  gapY,
  backgroundColor,
} = toRefs(props);
const watermarkCanvas = ref(null);

const drawWatermark = () => {
  const canvas = watermarkCanvas.value;

  // 确保 canvas 存在
  if (!canvas) return;

  const ctx = canvas.getContext('2d');

  // 确保获取到上下文
  if (!ctx) return;

  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 设置背景颜色
  ctx.fillStyle = backgroundColor.value;
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 保存当前状态
  ctx.save();

  // 水印绘制，遍历画布
  for (let x = 0; x < canvasWidth.value; x += gapX.value) {
    for (let y = 0; y < canvasHeight.value; y += gapY.value) {
      // 保存状态以便每次绘制水印后恢复
      ctx.save();

      // 移动原点到要绘制的位置
      ctx.translate(x, y);

      // 旋转
      ctx.rotate((rotateDegree.value * Math.PI) / 180);

      // 设置水印样式
      ctx.font = `${fontSize.value}px Arial`;
      ctx.fillStyle = fontColor.value;
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';

      // 绘制水印文案
      ctx.fillText(watermarkText.value, 0, 0);

      // 恢复状态
      ctx.restore();
    }
  }

  // 恢复画布的旋转状态
  ctx.restore();
};

// 在组件挂载时绘制初始水印
onMounted(() => {
  drawWatermark();
});

// 当水印文案或其他相关 props 发生变化时重新绘制水印
watchEffect(() => {
  drawWatermark();
});
</script>

<style scoped>
canvas {
  border: 1px solid #ccc;
}
</style>
